<template>
    <div>
        <el-form ref="form" disabled label-width="80px" label-position="top" size="70px">
            <el-form-item label="您的头像:">
                <el-image
                    v-if="clientele.profilePhoto"
                    style="height: 178px;width: 178px;"
                    :src="clientele.profilePhoto">
                </el-image>
            </el-form-item>
            <el-form-item label="您的用户名:" style="color: coral;">
                <span style="text-align: center;"><i class="el-icon-user-solid"></i>&emsp;{{clientele.name}}</span>
            </el-form-item>
            <el-form-item label="您的钱包金额💵:" style="color: coral;">
                <span style="text-align: center;"><i class="el-icon-coin"></i>&emsp;{{clientele.gameMoney}}</span>
            </el-form-item>  
        </el-form>
        <el-button type="warning" round plain @click="dialogVisible = true">修改个人信息</el-button>
        <el-dialog
            title="修改个人信息"
            :visible.sync="dialogVisible"
            :beforeClose="beforeClose"
            width="30%">
            <el-form ref="form" :model="clientele">
                <el-form-item label="用户名">
                    <el-input v-model="clientele.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="clientele.password" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                        name="photo"
                        class="avatar-uploader"
                        action="http://localhost/graduateprogram/clientele/uploadClientelePhoto"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="clientele.profilePhoto" :src="clientele.profilePhoto" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form> 
            <el-button @click="beforeClose">取 消</el-button>
            <el-button type="primary" @click="updateMyData" :loading="isUploading">确 定</el-button>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            dialogVisible:false,
            isUploading:false,
            clientele:{
                id:'',
                name:'',
                password:'',
                gameMoney:'',
                profilePhoto:'',
            },
        };
    },
    mounted(){
        this.clientele=JSON.parse(localStorage.getItem('clientele'));
        axios({
                method:'post',
                url:'/clientele/loginClientele',
                data:this.clientele,
            }).then(
                response=>{
                    if(response.data.data!==null){
                        localStorage.setItem("clientele",JSON.stringify(response.data.data));
                        this.$bus.$emit('clientele',response.data.data);
                        this.clientele=response.data.data;
                    }
                }
            )
    },
    methods:{
        beforeAvatarUpload(file){
            this.isUploading=true;
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleAvatarSuccess(res){
            this.clientele.profilePhoto=res.data;
            this.isUploading=false;
        },
        beforeClose(){
            this.dialogVisible=false;
            this.clientele=JSON.parse(localStorage.getItem('clientele'));
        },
        updateMyData(){
            axios(
                {
                    method:'post',
                    url:'/clientele/updateClientele',
                    data:this.clientele,
                }
            ).then(
                response=>{
                    if(response.data.data){
                        alert("修改成功✔");
                        localStorage.setItem("clientele",JSON.stringify(this.clientele));
                        this.$bus.$emit('clientele',this.clientele);
                        this.$router.push({name:'gameStore'});
                    }else{
                        alert("修改失败❌，可能由于您修改的用户名已存在");
                        this.clientele=JSON.parse(localStorage.getItem('clientele'));
                    }
                }
            )
        }
    }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    text-align: left;
  }
</style>